import { Canvas, Controls, Meta, Subtitle, Title } from '@storybook/blocks';
import { Stack, Tooltip } from '../../../components';
import TrafficLight from 'react-trafficlight';

import * as BoxStories from './Box.stories';

<Meta of={BoxStories} />

<Stack className="docs-header">
  <Title />
  <Tooltip anchor="bottom" text="Ready to be used in production!">
    <TrafficLight GreenOn />
  </Tooltip>
</Stack>
<Subtitle>A supercharged "animation-ready" div replacement!</Subtitle>

<br />

<Canvas of={BoxStories.PlainBox} />

## Props

<Controls
  exclude={['className']}

/>

<br />

## Stories

<br />

### Plain Box

<Canvas of={BoxStories.PlainBox} sourceState="shown" />
### Animated Box
<Canvas of={BoxStories.AnimatedBox} sourceState="shown" />
### ScrollTrigger
<Canvas of={BoxStories.ScrollTrigger} sourceState="shown" />
### Section
<Canvas of={BoxStories.Section} sourceState="shown" />
### Header
<Canvas of={BoxStories.Header} sourceState="shown" />
### Footer
<Canvas of={BoxStories.Footer} sourceState="shown" />