import {
  Meta,
  Preview,
  Props,
  Story,
  SourceState,
} from "@storybook/addon-docs/blocks";
import { ComponentHeading, EnumTable } from "../../storybook-components";
import { Text, STATUS_VARIANT } from "../..";
import { ArrowLink } from "./ArrowLink";

<Meta title="Components/Navigation/Arrow Link" component={ArrowLink} />

<ComponentHeading
  componentName="ArrowLink"
  description="Link component with an arrow icon"
  sourcePath="src/components/ArrowLink/ArrowLink.tsx"
/>

```jsx
import { ArrowLink } from "@aptible/arrow-ds";
```

<Preview>
  <Story name="ArrowLink">
    <ArrowLink>This is the ArrowLink component.</ArrowLink>
  </Story>
</Preview>

## Props

<Props of={ArrowLink} />

<EnumTable enums={{ STATUS_VARIANT }} />

## Demos

### Disabled

<Preview withSource={SourceState.OPEN}>
  <Story name="Disabled">
    <ArrowLink disabled>Arrow Link</ArrowLink>
  </Story>
</Preview>

### Inline

<Preview withSource={SourceState.OPEN}>
  <Story name="Inline">
    <Text>
      Duis vulputate dui quis commodo cursus. In{" "}
      <ArrowLink>Arrow Link</ArrowLink>
      fermentum efficitur vehicula. Integer nec felis varius, ultrices erat ac, volutpat
      lectus. Proin eu sed magna accumsan blandit a ac nisl. Nulla eros ante
    </Text>
  </Story>
</Preview>

### Full-width

<Preview withSource={SourceState.OPEN}>
  <Story name="Full-width">
    <ArrowLink block>Arrow Link</ArrowLink>
  </Story>
</Preview>